import 'package:flutter/material.dart';

class ChipDemo extends StatefulWidget {
  ChipDemo({Key key}) : super(key: key);

  _ChipDemoState createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {
  List<String> _tags = ['html', 'css', 'js', 'java', 'flutter'];
  String _action = 'nothing';
  List<String> _selected = [];
  String _chioce = 'lemon';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChipDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Wrap(
              spacing: 8.0,
              runSpacing: 10.0,
              children: <Widget>[
                Chip(
                  label: Text('lift1'),
                ),
                Chip(
                  label: Text('lift2'),
                  backgroundColor: Colors.orange,
                ),
                Chip(
                  label: Text('lift2'),
                  avatar: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://avatar.csdn.net/D/7/1/3_shanyuu.jpg'),
                  ),
                ),
                Chip(
                  label: Text('lift2'),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.grey,
                    child: Text('data'),
                  ),
                ),
                Chip(
                  label: Text('llift2lift2'),
                  onDeleted: () {},
                  deleteIcon: Icon(
                    Icons.delete_forever,
                    color: Colors.pink,
                  ),
                  deleteButtonTooltipMessage: 'deleteButtonTooltipMessage',
                  avatar: CircleAvatar(
                    backgroundImage: NetworkImage(
                      'https://avatar.csdn.net/D/7/1/3_shanyuu.jpg',
                    ),
                  ),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return Chip(
                      label: Text(tag),
                      onDeleted: () {
                        setState(() {
                          _tags.remove(tag);
                        });
                      },
                    );
                  }).toList(),
                ),
                Container(
                  width: double.infinity,
                  child: Text('ActionChip :: $_action'),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return ActionChip(
                      label: Text(tag),
                      onPressed: () {
                        setState(() {
                          _action = tag;
                        });
                      },
                      // onDeleted: () {
                      //   setState(() {
                      //     _tags.remove(tag);
                      //   });
                      // },
                    );
                  }).toList(),
                ),
                Container(
                  width: double.infinity,
                  child: Text('FilterChip :: ${_selected.toString()}'),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return FilterChip(
                      label: Text(tag),
                      selected: _selected.contains(tag),
                      onSelected: (v) {
                        setState(() {
                          if (_selected.contains(tag)) {
                            _selected.remove(tag);
                          } else {
                            _selected.add(tag);
                          }
                        });
                      },
                    );
                  }).toList(),
                ),
                Container(
                  width: double.infinity,
                  child: Text('ChioceChip :: $_chioce'),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return ChoiceChip(
                      label: Text(
                        tag,
                        style: TextStyle(
                          color: _chioce == tag ? Colors.white : Colors.black,
                        ),
                      ),
                      selectedColor: Colors.red,
                      selected: _chioce == tag,
                      onSelected: (v) {
                        setState(() {
                          _chioce = tag;
                        });
                      },
                    );
                  }).toList(),
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.restore),
        onPressed: () {
          setState(() {
            _tags = ['html', 'css', 'js', 'java', 'flutter'];
            _selected = [];
            _chioce = 'lemon';
          });
        },
      ),
    );
  }
}
